// <div class="loading"><div class="gooey"><span class="dot"></span><div class="dots"><span></span><span></span><span></span><</div></div></div>

.loading {
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: #fff;
	z-index: 9999999999999;
}

.gooey {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 142px;
	height: 40px;
	margin: -20px 0 0 -71px;
	background: #fff;
	filter: contrast(20);

	.dot {
		position: absolute;
		width: 16px;
		height: 16px;
		top: 12px;
		left: 15px;
		filter: blur(4px);
		background: #000;
		border-radius: 50%;
		transform: translateX(0);
		animation: dot 3s infinite;
	}

	.dots {
		transform: translateX(0);
		margin-top: 12px;
		margin-left: 31px;
		animation: dots 3s infinite;

		span {
			display: block;
			float: left;
			width: 16px;
			height: 16px;
			margin-left: 16px;
			filter: blur(4px);
			background: #000;
			border-radius: 50%;
		}
	}
}
@-moz-keyframes dot {
	50% {
		transform: translateX(100px);
	}
}
@-webkit-keyframes dot {
	50% {
		transform: translateX(100px);
	}
}
@-o-keyframes dot {
	50% {
		transform: translateX(100px);
	}
}
@keyframes dot {
	50% {
		transform: translateX(100px);
	}
}
@-moz-keyframes dots {
	50% {
		transform: translateX(-26px);
	}
}
@-webkit-keyframes dots {
	50% {
		transform: translateX(-26px);
	}
}
@-o-keyframes dots {
	50% {
		transform: translateX(-26px);
	}
}
@keyframes dots {
	50% {
		transform: translateX(-26px);
	}
}
